<template>
	<view class="home">
		home
		<up-row justify="space-around" gutter="5">
			<!-- #ifdef APP -->
			<up-col span="4">
				<up-button type="primary" @click="payAli" text="支付宝支付"></up-button>
			</up-col>
			<up-col span="4">
				<up-button type="primary" @click="payWechat" text="微信支付"></up-button>
			</up-col>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<up-col span="4">
				<up-button type="primary" @click="payMP" text="微信小程序支付"></up-button>
				<up-button @click="getInfoList">huoqushuju</up-button>
			</up-col>
			<!-- #endif -->
		</up-row>
		<!-- 提示框 -->
		<iot-loading ref="loading" />
		<iot-uToast ref="uToast" />
	</view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { onMounted, ref, reactive } from 'vue';
import { createOrder, getOpenid, getMPid, createMPOrder, getInfo } from '@/api/pay.js';
onMounted(() => {
	console.log('加载数据');
});

// 支付宝支付
const payAli = async () => {
	console.log('支付宝');
	const { orderInfo } = await createOrder({
		platform: 'app-plus', // 平台
		provider: 'alipay', // 提供商
		totalFee: 1 // 费用
	});
	console.log('orderInfo', orderInfo);
	// 发起支付
	uni.requestPayment({
		provider: 'alipay',
		orderInfo,
		success(res) {
			uni.showToast({
				title: '支付成功'
			});
			console.log('支付成功', res);
		},
		fail: (err) => {
			uni.showToast({
				title: '支付失败',
				icon: 'error'
			});
			console.log('支付失败', err);
		}
	});
};
// 支付微信支付
const payWechat = async () => {
	// 获取code
	uni.login({
		onlyAuthorize: true, // 只要授权
		async success(res) {
			console.log('success', res);
			// 获取openid
			const { openid } = await getOpenid({
				action: 'loginByWeixin',
				params: {
					code: res.code,
					platform: 'mp-weixin'
				}
			});
			console.log('openid', openid);
			// 创建订单
			const { orderInfo } = await createOrder({
				platform: 'app-plus', // 平台
				provider: 'wxpay', // 提供商
				openid,
				totalFee: 1 // 费用(百分比)
			});
			console.log('订单信息', orderInfo);
			// 发起支付
			uni.requestPayment({
				provider: 'wxpay',
				...orderInfo,
				success(r) {
					uni.showToast({
						title: '支付成功'
					});
					console.log('支付成功', r);
				},
				fail: (error) => {
					uni.showToast({
						title: '支付失败',
						icon: 'error'
					});
					console.log('支付失败', error);
				}
			});
		},
		fail(err) {
			console.log('fail', err);
		},
		complete(res) {
			console.log('complete', res);
		}
	});
};
// 微信小程序支付（只支持微信支付）
const payMP = async () => {
	console.log('111');
	// 获取code
	uni.login({
		async success(res) {
			console.log('success', res);
			// 获取openid
			const { openid } = await getMPid({
				code: res.code
			});
			console.log('openid', openid);
			// 创建订单
			const params = await createMPOrder({
				openid,
				amount: 1
			});
			console.log('订单信息', params);
			// 发起支付
			uni.requestPayment({
				...params,
				signType: 'MD5',
				success(res) {
					uni.showToast({
						title: '支付成功'
					});
					console.log('支付成功', res);
				},
				fail: (error) => {
					uni.showToast({
						title: '支付失败',
						icon: 'error'
					});
					console.log('支付失败', error);
				}
			});
		},
		fail(err) {
			console.log('fail', err);
		},
		complete(res) {
			console.log('complete', res);
		}
	});
};
// 请求接口
const getInfoList = async () => {
	const data = await getInfo({
		date: '12/12'
	});
	console.log('day', data);
};
</script>

<style></style>
